<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>元素删除和插入操作</title>
		<!-- 元素删除和插入操作：针对 元素 增删改 
		append()      功能：在匹配元素集合中所有元素的内部末尾插入内容
		prepend()     功能：在匹配元素集合中所有元素的内部开头插入内容
		
		after()       功能：在匹配元素集合中所有元素的外部后面插入内容
		before()      功能：在匹配元素集合中所有元素的外部前面插入内容
		
		remove()      功能：使用前提：元素内容，删除元素
		empty()       功能：使用前提：元素内容，清空元素
		
		replaceWith()
		-->
		<style>
			button{
				margin: 5px;
				padding: 10px 15px;
				cursor: pointer;
			}
			body{
				margin: 20px;
			}
			#target{
				border: 1px solid red;
				border-radius: 6px;
				margin-top: 10px;
				padding: 10px;
			}
			.贝利亚66{
				display: block;
				width: 200px;
				height: 200px;
				background: #e4393c;
				color: transparent;
				border-radius: 50%;
				background-image: url(../img/贝利亚66.png);
				background-size: 100% 100%;
			}
		</style>
		<script src="../js/jquery-1.11.1.js"></script>
	</head>
	<body>
		<!-- 7个按钮  div套 p  div套 p-->
		<button id="appendBtn">内部末尾插入</button>
		<button id="prependBtn">内部开头插入</button>
		<button id="afterBtn">外部后面插入</button>
		<button id="beforeBtn">外部前面插入</button>
		<button id="removeBtn">删除元素</button>
		<button id="emptyBtn">清空元素</button>
		<button id="replaceWithBtn">替换元素</button>
		<!-- 1.目标显示区域 -->
		<div id="target">
			<p>目标元素的默认段落~~</p>
		</div>
		<!-- 2.替换和插入的元素块区域  隐藏 -->
		<div id="newElement" style="display: none;">
			<p>这是插入和替换的元素块段落~~</p>
		</div>
		<script>
			/*1.点击 内部末尾插入 按钮 实现，选框内末尾插入新元素*/
			$("#appendBtn").click(function(){
				//插入新增元素 ---1.1创建新元素--复制新元素 clone()
				//根据抓到元素--复制出新元素---包含原有属性和样式
				var nw=$("#newElement").clone();
				//1.2复制div加p空间元素，含原有属性---显示 display:block
				nw.css("display","block");
				//1.3 复制新元素并且改变属性【显示】，插入内部尾部
				$("#target").append(nw);
			});
			/*2.点击 内部开头插入 按钮 实现，选框内开头插入新元素*/
			$("#prependBtn").click(function(){
				var nwp=$("#newElement").clone();
				nwp.css("display","block");
				$("#target").prepend(nwp);
			});
			/*3.点击 外部后面插入 按钮 实现，选框外后面插入新元素*/
			$("#afterBtn").click(function(){
				var af=$("#newElement").clone();
				af.addClass("贝利亚66");
				$("#target").after(af);
			});
			/*4.点击 外部前面插入 按钮 实现，选框外前面插入新元素*/
			$("#beforeBtn").click(function(){
				var bf=$("#newElement").clone();
				bf.css({"display":"block",
				        "width":"200px",
						"height":"200px",
						"background":"#e4393c",
						"color":"transparent",
						"border-radius":"50%",
						"background-image":"url(../img/贝利亚66.png)",
						"background-size":"100% 100%"
				});
				$("#target").before(bf);
			});
			/*5.点击 删除和清空元素 按钮 ：真实删除元素，清空元素操作*/
			$("#removeBtn").click(function(){
				$("#target").remove();
			});
			$("#emptyBtn").click(function(){
				$("#target").empty();
			});
			//6.点击 替换元素 按钮 将当前效果替换为新效果
			$("#replaceWithBtn").click(function(){
				//克隆 新元素效果
				var c=$("#newElement").clone().css("display","block");
				$("#target").replaceWith(c);
			});
		</script>
	</body>
</html>